<template>
    <div class="components-container">
        <!-- 新增修改 -->
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="maxWidth">
            <h3>{{title}}</h3>
            <div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <icon-svg icon-class="jbifm" />&nbsp;预约信息</legend>
                </fieldset>
                <div style="margin:10px 50px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">逝者姓名</label>
                            <div class="layui-input-inline">
                                <el-input type="text" v-model="mhrData.MHRDEADNAME"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">联系人</label>
                            <div class="layui-input-inline">
                                <el-input type="text" v-model="mhrData.MHRLINKMAN"></el-input>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-inline">
                                <el-input type="text" v-model="mhrData.MHRLINKPHONE"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">悼念厅</label>
                            <div class="layui-input-inline">
                                <el-select v-model="mhrData.MHRMEMID" filterable>
                                    <el-option v-for="item in hhldata" :key="item.Value" :label="item.Text" :value="item.Value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">使用日期</label>
                            <div class="layui-input-inline chooseTime">
                                <el-date-picker style="width:115px;float:left;" clear-icon="null" type="date" v-date v-model="mhrData.MHRLINSTRTDATE"></el-date-picker>
                                <el-time-picker ref="choosetime" style="width:75px;float:left" clear-icon="null" v-date v-model="mhrData.MHRLINSTRTIME" format='HH:mm'></el-time-picker>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <el-input style="width:495px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="mhrData.MHRDESCRIBE">
                                </el-input>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                    </div>
                </div>
            </div>
            <div class="layui-form-item btnCenter">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" :loading="this.$store.state.isloading" @click="submit">提交</el-button>
            </div>
        </sweet-modal>
        <!-- 详情 -->
        <sweet-modal ref="info" class="dialog" :sweetModalMaxWidth="maxWidth">
            <h3>{{title}}</h3>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>预约信息</legend>
            </fieldset>
            <div style="margin:10px 50px;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者姓名</label>
                        <div class="layui-input-inline">
                            <el-input type="text" v-model="mhrData.MHRDEADNAME" readonly></el-input>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系人</label>
                        <div class="layui-input-inline">
                            <el-input type="text" v-model="mhrData.MHRLINKMAN" readonly></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <el-input type="text" v-model="mhrData.MHRLINKPHONE" readonly></el-input>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">悼念厅</label>
                        <div class="layui-input-inline">
                            <el-select v-model="mhrData.MHRMEMID" filterable disabled>
                                <el-option v-for="item in hhldata" :key="item.Value" :label="item.Text" :value="item.Value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <!-- <div class="layui-inline">
                        <label class="layui-form-label">悼念厅</label>
                        <div class="layui-input-inline">
                            <el-input type="text" v-model="mhrData.MHRMEMID" readonly></el-input>
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <label class="layui-form-label">使用日期</label>
                        <div class="layui-input-inline chooseTime">
                            <el-date-picker style="width:115px;float:left;" clear-icon="null" type="date" v-date v-model="mhrData.MHRLINSTRTDATE" readonly></el-date-picker>
                            <el-time-picker ref="choosetime" style="width:75px;float:left" clear-icon="null" v-date v-model="mhrData.MHRLINSTRTIME" format='HH:mm' readonly></el-time-picker>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <el-input style="width:495px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="mhrData.MHRDESCRIBE" readonly>
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item btnCenter">
                <el-button @click="infoClose">取消</el-button>
            </div>
        </sweet-modal>
        <printPdf ref="prints"></printPdf>
    </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
    margin-left: 0;
}
.longtext {
    width: 480px;
}
.longertext {
    width: 770px;
}
.sweet-btn {
    margin-top: 20px;
}
</style>
<script>
import apiBase from "@/api/apiBase.js";
import sweetModal from "@/components/sweetModal";
import printPdf from "@/components/Pdf/Print";
import { manage } from "@/mixins/managePage.js";
import { formatDate, timeStringToDate, dateStringToDate } from "@/utils/date.js";
import { PRPORDER } from "@/const/orderConst.js";
import { ORDER } from "@/const/orderConst.js";
const onecar = "普通车";
const twocar = "高档车";
const threecar = "自送";
export default {
    mixins: [manage],
    data() {
        return {
            order: null,
            maxWidth: 800,
            title: null,
            hhldata: [],
            ids: null,
            mhrData: {
                MHRDEADNAME: null,
                MHRLINKMAN: null,
                MHRLINKPHONE: null,
                MHRMEMID: null,
                MHRLINSTRTDATE: null,
                MHRLINSTRTIME: null,
                MHRDESCRIBE: null
            },
        };
    },
    methods: {
        open(order, id) {
            this.ids = id;
            this.order = order;
            this.maxHeight = window.innerHeight - 240;
            //清理数据
            switch (this.order) {
                case "预约":
                    this.dataRepeat(); //数据重置
                    this.title = "礼厅预约新增";
                    this.initSelectData(); //初始化下拉框
                    this.$refs.dialog.open();
                    break;
                case PRPORDER.MODIFY:
                    this.title = "礼厅预约修改";
                    this.initSelectData();
                    this.dataInfo(id);
                    this.$refs.dialog.open();
                    break;
                case PRPORDER.INFO:
                    this.title = "礼厅预约详情";
                    this.dataRepeat();
                    this.initSelectData();
                    this.dataInfo(id);
                    this.$refs.info.open();
                    break;
                default:
            }
        },    
        //初始化下拉框数据
        initSelectData() {
            //初始化下拉框数据
            this.GetCreationStatus();
        },
        //提交
        submit() {
            switch (this.order) {
                case '预约':
                    this.dataAdd();
                    break;
                case PRPORDER.MODIFY:
                    this.dataModify();
                    break;
                case PRPORDER.DELETE:
                    break;
                case PRPORDER.INFO:
                    break;
                default:
            }
        },
        closeDialog() {
            if (this.order === '预约' || this.order === PRPORDER.MODIFY)
                this.$refs.dialog.close();
            else if (this.order === PRPORDER.INFO) this.$refs.info.close();
        },
        //获取性别
        // getSexType() {
        //     let data = {};
        //     apiBase.DoService(data, apiBase.getApiAdress().Code.GetSex, res => {
        //         this.sexType = res.data.content;
        //     });
        // },
        //获取预约礼厅
        GetCreationStatus() {
            let data = {};
            apiBase.DoService(
                data,
                // apiBase.getApiAdress().Reserve.GetPrpCreationStatus,
                apiBase.getApiAdress().MemorialUse.QueryMemorial,
                res => {
                    let creTypeData = res.data.content,
                        legendsCreData = creTypeData.map(item => ({
                            Text: item.MEMNAME,
                            Value: item.MEMID
                        }));
                    this.hhldata = legendsCreData;
                    // console.log(this.ServiceItemsList);
                }
            );
        },
      
        //登记新增
        dataAdd() {
            let Data = JSON.parse(JSON.stringify(this.mhrData));
            Data.MHRLINSTRTDATE = formatDate(
                Data.MHRLINSTRTDATE,
                "yyyyMMdd"
            );
            Data.MHRLINSTRTIME = formatDate(
                Data.MHRLINSTRTIME,
                "hhmmss"
            );
            apiBase.DoService(
                Data,
                apiBase.getApiAdress().MehBespoke.CreateRitualReserve,
                res => {
                    this.$message({
                        type: "success",
                        message: "新增成功!"
                    });
                    this.refreshData();
                    this.$refs.dialog.close();
                },
                res => {
                    this.$message.error(res.data.msg);
                }
            );
        },
        //登记修改
        dataModify() {
            let Data = JSON.parse(JSON.stringify(this.mhrData));
            Data.MHRLINSTRTDATE = formatDate(
                Data.MHRLINSTRTDATE,
                "yyyyMMdd"
            );
            Data.MHRLINSTRTIME = formatDate(
                Data.MHRLINSTRTIME,
                "hhmmss"
            );
            Data.MHRID = this.ids;
            apiBase.DoService(
                Data,
                apiBase.getApiAdress().MehBespoke.ModifyRitualReserve,
                res => {
                    this.$refs.dialog.close();
                    this.$message({
                        type: "success",
                        message: "修改成功!"
                    });
                    this.refreshData();
                },
                res => {
                    this.$message.error(res.data.msg);
                }
            );
        },
        //登记详情
        dataInfo(id) {
            let Data = {
                MHRID: id
            };
            apiBase.DoService(
                Data,
                apiBase.getApiAdress().MehBespoke.DetailRitualReserve,
                res => {
                    this.mhrData = res.data.content;
                    this.mhrData.MHRLINSTRTDATE = dateStringToDate(
                        res.data.content.MHRLINSTRTDATE
                    );
                    this.mhrData.MHRLINSTRTIME = timeStringToDate(
                        res.data.content.MHRLINSTRTIME
                    );
                }
            );
        },
        selectAddr() {
            this.mhrData.PRPCORPSEADDRESS = this.mhrData.PRPADDID + "";
        },
       
        //数据重置
        dataRepeat() {
            Object.assign(this.$data.mhrData, this.$options.data().mhrData);
        },
        refreshData() {
            this.$emit("refreshData");
        }
    },
    created() {
        let data = {};
        // apiBase.DoService(
        //     data,
        //     apiBase.getApiAdress().Param.GetIsChargeAndSpecial,
        //     res => {
        //         this.IsChargeAndSpecial = res.data.content;
        //     }
        // );
    },
    components: {
        sweetModal,
        printPdf
    },
    watch: {
        // "regDataEexend.leasetime": function(val) {
        //     this.mhrData.PRPLINSTRTDATE = formatDate(val, "yyyyMMdd");
        //     this.mhrData.PRPLINSTRTIME = formatDate(val, "hhmmss");
        // },
        // "regDataEexend.appointmenttime": function(val) {
        //     this.mhrData.PRPMEMSTRDATE = formatDate(val, "yyyyMMdd");
        //     this.mhrData.PRPMENSTRTIME = formatDate(val, "hhmmss");
        // }
    }
};
</script>

